<!-- 关于我们页面 -->
<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-icon cursor-pointer">
				<uni-icons type="left" size="24" color="#333" @click="goIndex"></uni-icons>
			</view>
			<view class="title">关于我的</view>
			<view class="right-icons">
			</view>
		</view>

		<!-- 底下内容 -->
		<view class="bottom">
			<swiper class="shopPhoto">
				<swiper-item v-for="(item,index) in mydata.file" :key="item.ossId">
					<image :src="baseUrl+ item.clientUrl"></image>
				</swiper-item>
			</swiper>

			<!-- 底部介绍 -->
			<view class="info-list">
				<view class="info-item" v-for="(item, index) in infoList" :key="index">
					<view class="item-icon">
						<uni-icons :type="item.icon" size="24" color="#1890ff"></uni-icons>
					</view>
					<view class="item-content">
						<text class="item-title">{{item.title}}</text>
						<text class="item-desc">{{item.desc}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {baseUrl} from '../../api/http';
	import {goIndex} from "../../util/go.ts"
	import {ref,Ref,onMounted} from "vue"
	import {getAbout} from "@/api/my/index.ts";
	import {onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app";
	
	
	// 存放获取过来的店铺数据
	const mydata = ref([])
	
	const infoList=ref( [  // 确保在这里正确定义
	        { icon: 'shop', title: '店铺介绍', desc: '' },
	        { icon: 'list', title: '经营范围', desc: '' },
	        { icon: 'location', title: '地址', desc: '' },
	        { icon: 'phone', title: '联系方式', desc: '' }
	      ])
	// 获取数据
	const getList = () => {
		getAbout().then(res => {
			// 获取图片
			mydata.value = res.data.data["data"];
			infoList.value[0].desc= mydata.value.description;
			infoList.value[1].desc= mydata.value.businessScope;
			infoList.value[2].desc= mydata.value.address;
			infoList.value[3].desc= mydata.value.phone;
		})
	}
	
 // 分享给朋友
   onShareAppMessage(() => ({
     title: '如初国风馆',
     path: '/pages/index/index', // 替换为你的页面路径
     imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
   }))
   // 分享到朋友圈
   onShareTimeline(() => ({
   	  title: '如初国风馆',
   	  path: '/pages/index/index', // 替换为你的页面路径
   	  imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
   }))
   
	getList()
	
	
	// const shopInformation = Ref<>
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding-top: 90rpx;
		background-color: #f5f5f5;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 88rpx;
			padding: 0 20rpx;
			background-color: #ffffff;
			border-bottom: 1px solid #f0f0f0;
			flex-shrink: 0;
		}

		.bottom {
			position: relative;
			width: 100%;
			height: 100%;
			
			.title-box {
				margin-bottom: 60rpx;
				text-align: center;

				.title {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
				}
			}

			.info-list {
				margin-top: 20rpx;
				.info-item {
					display: flex;
					width: 90%;
					align-items: center;
					padding: 30rpx;
					margin-left: 10rpx;
					margin-bottom: 30rpx;
					background-color: #fff;
					border-radius: 16rpx;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

					.item-icon {
						width: 80rpx;
						height: 80rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #f0f7ff;
						border-radius: 50%;
						margin-right: 30rpx;
					}

					.item-content {
						flex: 1;
						min-width: 0; 
						.item-title {
							display: block;
							font-size: 32rpx;
							color: #333;
							margin-bottom: 10rpx;
						}

						.item-desc {
							display: block;
							font-size: 28rpx;
							color: #666;
							word-wrap: break-word;
							white-space: pre-line;
						}
					}
				}
			}

			.shopPhoto {
				width: 100%;
				height: 500rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.shopIntroduce {
				display: flex;
				flex-direction: column;

				text {
					color: #666;
					margin: 10rpx;
					font-size: 50rpx;
				}
			}
		}
	}
</style>